<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>推广详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         label-position="left" size="small">
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button type="success" @click="viewSystemBid">查看当前竞价</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="setPrice">修改出价</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="syncDialogVisible = true">同步数据</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="推广名称">
                    {{ cpcPlanDetail.launchName }}
                </el-descriptions-item>
                <el-descriptions-item label="今日预算">
                    {{ cpcPlanDetail.todayBudget }}
                </el-descriptions-item>
                <el-descriptions-item label="推广城市">
                    {{ cpcPlanDetail.cityStr }}
                </el-descriptions-item>
                <el-descriptions-item label="点评报价">
                    {{ cpcPlanDetail.dpPrice }}
                </el-descriptions-item>
                <el-descriptions-item label="美团报价">
                    {{ cpcPlanDetail.mtPrice }}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="推广时间">
                    {{ cpcPlanDetail.dateTimeStr }}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="自动调价">
                    {{ cpcPlanDetail.autoPriceFlag }}
                </el-descriptions-item>
                <el-descriptions-item label="调价间隔">
                    {{ cpcPlanDetail.autoPriceGap }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider content-position="left">关联关键字推广</el-divider>
        <dp-cpc-keyword ref="dpCpcKeyword" :shop-id="shopId" :launch-id="launchId" size="small"></dp-cpc-keyword>
        <el-divider content-position="left">推广报表</el-divider>
        <dp-cpc-report ref="dpCpcReport" :shop-id="shopId" :launch-id="launchId" size="small"></dp-cpc-report>

        <el-dialog title="设置出价" width="30%" :visible.sync="setPriceDialogVisible">
            <el-form :model="setPriceForm" label-width="120px" size="small">
                <el-form-item label="点评出价">
                    <el-input v-model="setPriceForm.price" placeholder="点评出价"></el-input>
                </el-form-item>
                <el-form-item label="美团出价">
                    <el-input v-model="setPriceForm.mtPrice" placeholder="评价内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setPriceDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="setPriceConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="当前竞价" width="30%" :visible.sync="cpcViewDialogVisible">
            <div>大众点评竞价</div>
            <el-descriptions title="" direction="vertical" :column="6" border size="mini">
                <el-descriptions-item label="第3名">{{ cpcInfo.dp3thBid }}</el-descriptions-item>
                <el-descriptions-item label="第8名">{{ cpcInfo.dp8thBid }}</el-descriptions-item>
                <el-descriptions-item label="第13名">{{ cpcInfo.dp13thBid }}</el-descriptions-item>
                <el-descriptions-item label="第18名">{{ cpcInfo.dp18thBid }}</el-descriptions-item>
                <el-descriptions-item label="第23名">{{ cpcInfo.dp23thBid }}</el-descriptions-item>
                <el-descriptions-item label="第28名">{{ cpcInfo.dp28thBid }}</el-descriptions-item>
            </el-descriptions>
            <div>美团竞价</div>
            <el-descriptions title="" direction="vertical" :column="6" border size="mini">
                <el-descriptions-item label="第3名">{{ cpcInfo.mt3thBid }}</el-descriptions-item>
                <el-descriptions-item label="第8名">{{ cpcInfo.mt8thBid }}</el-descriptions-item>
                <el-descriptions-item label="第13名">{{ cpcInfo.mt13thBid }}</el-descriptions-item>
                <el-descriptions-item label="第18名">{{ cpcInfo.mt18thBid }}</el-descriptions-item>
                <el-descriptions-item label="第23名">{{ cpcInfo.mt23thBid }}</el-descriptions-item>
                <el-descriptions-item label="第28名">{{ cpcInfo.mt28thBid }}</el-descriptions-item>
            </el-descriptions>
            <div>建议指标</div>
            <el-descriptions title="" :column="2" border size="mini">
                <el-descriptions-item label="建议点评出价">{{ cpcInfo.suggestDpBid }}</el-descriptions-item>
                <el-descriptions-item label="建议美团出价">{{ cpcInfo.suggestMtBid }}</el-descriptions-item>
                <el-descriptions-item label="建议预算">{{ cpcInfo.suggestBudget }}</el-descriptions-item>
                <el-descriptions-item label="建议预算上浮">{{ cpcInfo.suggestBudgetFloat }}%</el-descriptions-item>
                <el-descriptions-item label="建议点评关键词出价">{{ cpcInfo.suggestKeywordDpBid }}
                </el-descriptions-item>
                <el-descriptions-item label="建议美团关键词出价">{{ cpcInfo.suggestKeywordMtBid }}
                </el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cpcViewDialogVisible = false" type="primary" size="small">关 闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="同步数据" width="30%" :visible.sync="syncDialogVisible">
            <el-form :model="syncForm" label-width="120px" size="small">
                <el-form-item label="请选择同步日期">
                    <el-select v-model="syncForm.daysType" placeholder="请选择" clearable>
                        <el-option label="今天" value="today"></el-option>
                        <el-option label="昨天" value="yesterday"></el-option>
                        <el-option label="近三天" value="three"></el-option>
                        <el-option label="近七天" value="seven"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="syncDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="syncConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="数据结果" width="50%" :visible.sync="syncResultDialogVisible">
            <div slot="footer" class="dialog-footer">
                <el-button @click="syncResultDialogVisible = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getDpCpcPlanById, getDpCpcPlanData, setDpCpcPlanPrice, viewDpCpcPlanSystemBid} from "@/api/api";
import DpCpcReport from "@/component/DpCpcReport";
import DpCpcKeyword from "@/component/DpCpcKeyword";

export default {
    name: "DpCpcPlanDetail",
    components: {DpCpcReport, DpCpcKeyword},
    data() {
        return {
            cpcPlanDetail: {},
            launchId: '',
            id: '',
            shopId: '',

            activeName: 'keyword',

            // 设置出价
            setPriceDialogVisible: false,
            setPriceForm: {
                launchId: '',
                targetId: '',
                price: '',
                mtTargetId: '',
                mtPrice: '',
                shopId: '',
                eCpcChecked: true,
                eCpcFloatRatio: 30,
            },

            // 当前竞价
            cpcViewDialogVisible: false,
            cpcInfo: {},

            // 同步
            syncDialogVisible: false,
            syncForm: {
                daysType: '',
            },

            // 同步结果
            syncResultDialogVisible: false,
            syncResult: {},

            // 字段信息
            fields: this.CONST.cpc_fields,
        }
    },
    methods: {
        // 渲染头部
        renderHeader(h, {column, $index}, item) {
            return [column.label, h(
                'el-tooltip',
                {
                    props: {
                        content: item.desc,
                        placement: 'top'
                    },
                },
                [h('span', {class: {'el-icon-question': true}})]
            )]
        },
        // 设置出价
        setPrice() {
            this.setPriceForm.launchId = this.cpcPlanDetail.launchId;
            this.setPriceForm.targetId = this.cpcPlanDetail.dpTargetId;
            this.setPriceForm.price = this.cpcPlanDetail.dpPrice;
            this.setPriceForm.mtTargetId = this.cpcPlanDetail.mtTargetId;
            this.setPriceForm.mtPrice = this.cpcPlanDetail.mtPrice;
            this.setPriceForm.shopId = this.cpcPlanDetail.shopId;
            this.setPriceDialogVisible = true;
        },
        // 设置出价确认
        setPriceConfirm() {
            setDpCpcPlanPrice({'shopId': this.setPriceForm.shopId}, this.setPriceForm).then(data => {
                if (data.respCode == 1000) {
                    this.setPriceDialogVisible = false;
                    this.getData();
                }
            })
        },
        // 查看系统报价
        viewSystemBid() {
            viewDpCpcPlanSystemBid({'id': this.id}).then(data => {
                if (data.respCode == 1000) {
                    this.cpcViewDialogVisible = true;
                    this.cpcInfo = data.body;
                }
            })
        },
        // 同步数据确定
        syncConfirm() {
            let params = {};
            params.id = this.id;
            let daysType = this.syncForm.daysType;
            let startDate = null;
            let endDate = null;
            if (daysType === 'today') {
                startDate = this.GLOBAL.getFormatDate(new Date());
                endDate = startDate
            } else if (daysType === 'yesterday') {
                startDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
                endDate = startDate;
            } else if (daysType === 'three') {
                startDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 3));
                endDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
            } else if (daysType === 'seven') {
                startDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 7));
                endDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
            }
            params.startDate = startDate;
            params.endDate = endDate;
            getDpCpcPlanData(params).then(data => {
                if (data.respCode == 1000) {
                    this.syncResult = data.body;
                    this.syncDialogVisible = false;
                    this.syncResultDialogVisible = true;
                }
            });
        },
        // 获取详情数据
        getData: function () {
            getDpCpcPlanById({"id": this.id}).then(data => {
                this.cpcPlanDetail = data.body;
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.launchId = Number(this.$route.query.launchId);
        this.shopId = this.$route.query.shopId;
        this.getData();
    },
}
</script>

<style scoped>

</style>
